import React, { Component } from "react";
import { Table, Divider, Avatar, Button, message } from "antd";
import { observer } from "mobx-react";
import { observable, runInAction, toJS } from "mobx";
import service from "./AdminUserListService";

@observer
class AdminUserListTable extends Component {
  columns = [
    {
      title: "用户名",
      dataIndex: "login"
    },
    {
      title: "昵称",
      dataIndex: "nickName"
    },
    {
      title: "地址",
      dataIndex: "address",
      render: (text: any, record: any) => (
        <span>
          {record.province}-{record.city}-{record.region}-{record.address}
        </span>
      )
    },
    {
      title: "头像",
      dataIndex: "photoImg",
      render: (text: string) => <Avatar src={text} />
    },
    {
      title: "Action",
      key: "action",
      render: (text: string, record: any) => (
        <span>
          <Button
            onClick={() => {
              this.onClickViewBtn(record);
            }}
            icon="eye"
          >
            查看
          </Button>
          <Divider type="vertical" />
          <Button type="danger" icon="delete">删除</Button>
          <Divider type="vertical" />
          <Button type="primary" icon="setting">配置</Button>
          <Divider type="vertical" />
          <Button icon="lock">重置密码</Button>
        </span>
      )
    }
  ];

  @observable data = [];
  @observable loading = true;

  onClickViewBtn = (record: any) => {
    console.log("view record ", toJS(record));
  };

  componentDidMount() {
    service.listAll().then((res: any) => {
      // console.log("res is ", res);
      if (res.status === 0) {
        runInAction(() => {
          this.data = res.data;
        });
      } else {
        message.error(res.msg);
      }
      runInAction(() => {
        this.loading = false;
      });
    });
  }

  render() {
    return (
      <div className="table-content">
        <Table
          dataSource={this.data}
          columns={this.columns}
          rowKey="id"
          loading={this.loading}
        />
      </div>
    );
  }
}

export default AdminUserListTable;
